$(function () {
  // 2.初始化富文本
  initEditor()

  const layer = layui.layer
  const form = layui.form
  // 文章发布状态，默认已发布
  let art_state = '已发布'
  // 1.定义并渲染文章类别下拉框
  initCate();
  function initCate() {
    $.ajax({
      mrthod: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);

        let htmlStr = template("tpl-cate", res);
        $("#cate_id").html(htmlStr);
        // layui不支持初次渲染，必须调用form.render方法
        form.render("select");
      },
    });
  }

  // 3.图片区域裁剪
  // 初始化图片裁剪器
  const $image = $('#image')
  // 裁剪选项配置
  const options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 初始化裁剪区域
  $image.cropper(options)

  // 4.点击选择封面按钮，唤起文件选择框
  $('#upload').on('click',function(){
    $('#file').click()
  })

  // 5.监听file文件上传框的change事件
  $('#file').on('change',function(e){
    // 通过事件对象拿到选择的图片
    const files = e.target.files
    // console.log(files)

    if(files.length === 0) return layer.msg('请选择图片')
    // 拿到当前选择图片，files是个对象
    const file = files[0]

    // 将图片转成url地址
    const fileURL = URL.createObjectURL(file)
    // 给裁剪区域重新赋值
    $image
    .cropper('destroy') //销毁之前
    .attr('src',fileURL)  // 重新赋值新的src属性
    .cropper(options)  // 初始化
  })

  // 6.给草稿按钮添加点击事件
  $('#btnDraft').on('click',function(){
    art_state = '草稿'
  })

  // 7.绑定表单submit事件
  $('#form-pub').on('submit',function(e){
    e.preventDefault()

    // 实例化一个FormDate对象
      // 因为FormDate对象是原生js对象
      // 所以使用$(this)[0]将jQuery转成原生
    const fd = new FormData($(this)[0])

    // 将art_state 插入到fd对象中
    fd.append('state', art_state)
    // console.log(fd)

    // 将封面裁剪过后的图片，输出为一个文件对象
    $image
    .cropper('getCroppedCanvas', {
      // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob(function(blob) {
      // 将 Canvas 画布上的内容，转化为文件对象
      // 得到文件对象后，进行后续的操作
      // 5. 将文件对象，存储到 fd 中
      fd.append('cover_img', blob)
      // 调用函数发起ajax请求,必须在toBlob回调函数中
      publishArticle(fd)
    })
  })

  // 8.ajax请求函数
  function publishArticle(fd) {
    // debugger
    $.ajax({
      method:'POST',
      url:'/my/article/add',
      data: fd,
      // 注：如果是发起携带FormData对象的ajax请求必须添加以下两个属性
      contentType:false,
      processData:false,
      success:function(res){
        if(res.status !== 0) return layer.msg(res.message)
        layer.msg(res.message)

        // 调用index页面的artListHighlight()方法
        // console.log(window.parent)
        // window.parent.click()
        
        location.href = '/article/art_list.html'
        $('.layui-nav-child dd:nth-child(2)', window.parent.document)
            .addClass('layui-this')
            .siblings()
            .removeClass('layui-this')
      }
    })
  }
})